<template>
    <el-table-column :label="columns.label"
                     align="center"
                     :formatter="row => moneyFormatter(row, columns.prop)"
                     :width="columns.width"
                     :prop="columns.prop">
        <template v-if="columns.children && columns.children.length">
            <Column v-for="column in columns.children"
                    :key="column.id"
                    :need-money-format="needMoneyFormat"
                    :status-format-model="statusFormatModel"
                    :need-date-format="needDateFormat"
                    :columns="column"></Column>
        </template>
    </el-table-column>
</template>

<script>
    import {moneyFilter} from "@/utils/math";
    import dayjs from 'dayjs'

    export default {
        name: "Column",
        props: {
            // 表头的树结构
            columns: {
                type: Object,
                default: () => {}
            },
            // 需要金额千分位处理的列
            needMoneyFormat: {
                type: Array,
                default: () => []
            },
            // 需要状态码转名称的模板
            statusFormatModel: {
                type: Array,
                default: () => []
            },
            // 需要日期处理的列
            needDateFormat: {
                type: Array,
                default: () => []
            }
        },
        methods: {
            /** 根据props传值进行格式化处理 */
            moneyFormatter(row, prop) {
                const statusProps = this.statusFormatModel.map(item => item.prop)
                const dateProps = this.needDateFormat.map(item => item.prop)
                if (prop && this.needMoneyFormat.includes(prop)) {
                    // 金额千分符+保留小数
                    return moneyFilter(row[prop])
                } else if (prop && statusProps.includes(prop)) {
                    // 状态码格式化
                    const model = this.statusFormatModel.find(v => prop === v.prop).model
                    return model[row[prop]]
                } else if (dateProps.includes(prop)) {
                    // 日期格式化
                    const model = this.needDateFormat.find(v => prop === v.prop)
                    return dayjs(row[prop]).format(model.format)
                } else return row[prop]
            }
        }
    }
</script>

<style scoped lang="scss">

</style>
